<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>景点信息</title>
  <link rel="stylesheet" href="../../../yl/index.css" />
  <!-- 布局样式 -->
  <link rel="stylesheet" href="../../../yl/style.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css">
  <link rel="stylesheet" href="../../../yl/mobile.css" />
  <link rel="stylesheet" href="../../../yl/easyui.css" />
  <link rel="stylesheet" href="../../../yl/icon.css" />
</head>

<body>
  <!-- <div id="app"> -->
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar">
        <div class="m-title">{{action=='Add'?'添加景区信息':action=='Modify'?'修改景区信息':''}}</div>
      </div>
    </header>
    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
      id="MainTable" ref="MainTable"
      :data-options="JSON.stringify({ 'TableName': 'scenic_spot', 'form': 'dataForm' ,'primary_key':'Scenic_Spot_SerialNumber' })">
      <div class="yl-main">
        <div class="table_titel">
          <div class="titel">景区信息</div>
        </div>
        <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
          <el-descriptions :column="1" size="large" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">景区名称</div>
              </template>
              <el-form-item prop="Scenic_Spot_Name" :rules="[{ required: true, message: '请输入景区名称', trigger: 'blur' }]">
                <el-input v-model="dataForm.Scenic_Spot_Name" class="borderless-input" placeholder="请输入景区名称" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">景区封面</div>
              </template>
              <el-form-item prop="Picture_URL" :rules="[{ required: true, message: '请输入景区封面', trigger: 'blur' }]">
                <yl-upload v-model="dataForm.Picture_URL"></yl-upload>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">开放时间</div>
              </template>
              <el-form-item prop="Start_Hours" :rules="[{ required: true, message: '选择开放时间', trigger: 'change' }]">
                <el-time-picker format="HH:mm:ss" value-format="HH:mm:ss" v-model="dataForm.Start_Hours"
                  class="borderless-input" :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                  placeholder="选择开放时间"></el-time-picker>
                <!-- <el-time-select v-model="dataForm.Start_Hours" class="borderless-input" format="HH:mm:ss"
                  value-format="HH:mm:ss" placeholder="选择开放时间" size="large"></el-time-select> -->
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">关闭时间</div>
              </template>
              <el-form-item prop="End_Hours" :rules="[{ required: true, message: '选择关闭时间', trigger: 'change' }]">
                <el-time-picker format="HH:mm:ss" value-format="HH:mm:ss" v-model="dataForm.End_Hours"
                  class="borderless-input" :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                  placeholder="选择关闭时间"></el-time-picker>
                <!-- <el-time-select v-model="dataForm.End_Hours" class="borderless-input" format="HH:mm:ss"
                  value-format="HH:mm:ss" placeholder="选择关闭时间" size="large"></el-time-select> -->
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">景区介绍</div>
              </template>
              <el-form-item prop="Scenic_Spot_Notes" :rules="[{ required: true, message: '请输入景区介绍', trigger: 'blur' }]">
                <el-input type="textarea" :autosize="{ minRows: 2}" v-model="dataForm.Scenic_Spot_Notes"
                  class="borderless-input" placeholder="请输入景区介绍" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">省/市/区</div>
              </template>
              <el-cascader @change="changeCity" v-model="dataForm.County_Nubmer" filterable class="borderless-input"
                :props="{value:'value',label:'label',children:'children',emitPath:false}" placeholder="请选择省市区乡镇"
                :options="city" style="width: 100%"></el-cascader>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">乡镇/村庄</div>
              </template>
              <el-cascader @change="changeCity1" v-model="dataForm.Village_SerialNumber" filterable
                class="borderless-input"
                :props="{value:'ProvinceNumber',label:'Province',children:'children',emitPath:false}"
                placeholder="请选择乡镇/村庄" :options="city1" style="width: 100%"></el-cascader>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">景区地址</div>
              </template>
              <el-form-item prop="Address" :rules="[{ required: true, message: '请输入景区地址', trigger: 'blur' }]">
                <el-input v-model="dataForm.Address" class="borderless-input" placeholder="请输入景区地址" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">坐标</div>
              </template>
              <el-form-item prop="Coord"  :rules="[{ required: true, validator:IS_Coords, trigger: 'blur' }]">
                <el-input v-model="dataForm.Coord" class="borderless-input" placeholder="请输入坐标" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">门票价格</div>
              </template>
              <el-form-item prop="Price" :rules="[{ required: true, message: '请输入门票价格', trigger: 'blur' }]">
                <el-input v-model="dataForm.Price" class="borderless-input" placeholder="请输入门票价格" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">景区电话</div>
              </template>
              <el-form-item prop="Contact_Phone" :rules="[{ required: true, message: '请输入景区电话', trigger: 'blur' }]">
                <el-input v-model="dataForm.Contact_Phone" class="borderless-input" placeholder="请输入景区电话" />
              </el-form-item>
            </el-descriptions-item>
            <!-- <el-descriptions-item>
              <template #label>
                <div class="cell-item">二维码跳转链接</div>
              </template>
              <el-form-item prop="QR_URL">
                <el-input v-model="dataForm.QR_URL" class="borderless-input" placeholder="请输入二维码跳转链接" />
              </el-form-item>
            </el-descriptions-item> -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">景区标签</div>
              </template>
              <el-form-item prop="Contact_Phone" :rules="[{ required: true, validator:(rule, value, callback)=>{this.validator(rule, this.value, callback)}, trigger: 'change' }]">
                <el-select multiple clearable v-model.trim="value" placeholder="请选择景区标签" filterable style="width: 100%">
                  <el-option v-for="(item,index) in scenic_spot_tags" :key="index" :label="item.Scenic_Spot_Tag"
                    :value="item.Scenic_Spot_Tag_SerialNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">景区详情</div>
              </template>
              <el-form-item prop="Main" :rules="[{ required: true, message: '请输入景区详情', trigger: 'blur' }]">
                <yl-text-editor v-model="dataForm.Main" placeholder="请输入景区详情"></yl-text-editor>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <div id="ChildTable">
          <div class="table_titel">
            <div class="titel">收费二维码配置</div>
            <div class="operation">
              <el-button type="primary" size="small" @click="handleAdd('childDataForm3')">新增</el-button>
              <el-button type="danger" size="small" @click="handleRemove('childDataForm3')">删除</el-button>
            </div>
          </div>
          <el-form :model="{childDataForm3:childDataForm3.filter(item => item.Row_Status != '1')}" ref="form1"
            :inline-message="true" style="width: 100%">
            <el-descriptions style="margin: 0 0 10px;"
              v-for="(item,index) in childDataForm3.filter(item => item.Row_Status != '1')" :key="index"
              :data-options="JSON.stringify({ 'TableName': 'scenic_spot_QR', 'form': 'childDataForm3', 'ParentTableName': 'scenic_spot'})"
              :column="3" size="large" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">来源</div>
                </template>
                <el-form-item :prop="'childDataForm3.' + index + '.Scenic_Spot_QR_Name'">
                  <el-input v-model="item.Scenic_Spot_QR_Name" class="borderless-input" placeholder="请输入二维码来源" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">二维码链接</div>
                </template>
                <el-form-item :prop="'childDataForm3.' + index + '.QR_URL'">
                  <el-input v-model="item.QR_URL" class="borderless-input" placeholder="请输入二维码链接" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">二维码图片</div>
                </template>
                <el-form-item :prop="'childDataForm3.' + index + '.Picture_URL'">
                  <yl-upload v-model="item.Picture_URL"></yl-upload>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
          <div class="table_titel">
            <div class="titel">内部景点</div>
            <div class="operation">
              <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
              <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
            </div>
          </div>
          <el-descriptions
            :data-options="JSON.stringify({ 'TableName': 'scenic_spot_mapping_tags', 'form': 'childDataForm2', 'ParentTableName': 'scenic_spot'})"></el-descriptions>
          <el-form :model="{childDataForm:childDataForm.filter(item => item.Row_Status != '1')}" ref="form1"
            :inline-message="true" style="width: 100%">
            <el-descriptions style="margin: 0 0 10px;"
              v-for="(item,index) in childDataForm.filter(item => item.Row_Status != '1')" :key="index"
              :data-options="JSON.stringify({ 'TableName': 'scenic_spot_detail', 'form': 'childDataForm', 'ParentTableName': 'scenic_spot'})"
              :column="2" size="large" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">景点名称</div>
                </template>
                <el-form-item :prop="'childDataForm.' + index + '.Scenic_Spot_Detail_Name'">
                  <el-input v-model="item.Scenic_Spot_Detail_Name" class="borderless-input" placeholder="请输入景点名称" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">景点封面</div>
                </template>
                <el-form-item :prop="'childDataForm.' + index + '.Picture_URL'">
                  <yl-upload ref="ylUpload" v-model="item.Picture_URL"></yl-upload>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">开放时间</div>
                </template>
                <el-form-item :prop="'childDataForm.' + index + '.Start_Hours'"
                  :rules="[{ required: true, message: '选择开放时间', trigger: 'change' }]">
                  <el-time-picker format="HH:mm:ss" value-format="HH:mm:ss" v-model="item.Start_Hours"
                    class="borderless-input" :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                    placeholder="选择开放时间"></el-time-picker>
                  <!-- <el-time-select v-model="item.Start_Hours" class="borderless-input" format="HH:mm:ss"
                    value-format="HH:mm:ss" placeholder="选择开放时间" size="large"></el-time-select> -->
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">关闭时间</div>
                </template>
                <el-form-item :prop="'childDataForm.' + index + '.End_Hours'"
                  :rules="[{ required: true, message: '选择关闭时间', trigger: 'change' }]">
                  <el-time-picker format="HH:mm:ss" value-format="HH:mm:ss" v-model="item.End_Hours"
                    class="borderless-input" :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                    placeholder="选择关闭时间"></el-time-picker>
                  <!-- <el-time-select v-model="item.End_Hours" class="borderless-input" format="HH:mm:ss"
                    value-format="HH:mm:ss" placeholder="选择关闭时间" size="large"></el-time-select> -->
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">历史介绍</div>
                </template>
                <el-form-item :prop="'childDataForm.' + index + '.Scenic_Spot_History'">
                  <el-input type="textarea" :autosize="{ minRows: 2}" v-model="item.Scenic_Spot_History"
                    class="borderless-input" placeholder="请输入历史介绍" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">地理位置（坐标点）</div>
                </template>
                <el-form-item :prop="'childDataForm.'+ index + '.Coord'"
                  :rules="[{ required: true, message: '请输入地理位置（坐标点）', trigger: 'blur' }]">
                  <el-input type="textarea" :autosize="{ minRows: 2}" v-model="item.Coord" class="borderless-input"
                    placeholder="请输入地理位置（坐标点）" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item :span="2">
                <template #label>
                  <div class="cell-item">景点二维码链接<br>(不填默认系统连接) </div>
                </template>
                <el-form-item :prop="'childDataForm.'+ index + '.QR_URL'">
                  <el-input v-model="item.QR_URL" class="borderless-input" placeholder="请输入景点二维码链接" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item :span="2">
                <template #label>
                  <div class="cell-item">景点详情</div>
                </template>
                <el-form-item :prop="'childDataForm.' + index + '.Main'"
                  :rules="[{ required: true, message: '请输入景点详情', trigger: 'blur' }]">
                  <yl-text-editor v-model="item.Main" placeholder="请输入景点详情"></yl-text-editor>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">语音讲解</div>
                </template>
                <el-form-item>
                  <el-tabs type="border-card" v-model="item.action">
                    <el-tab-pane v-for="(value, key) in tabs" :label="value" :name="key" :key="key">
                      <yl-upload accept=".mp3,.wav,.flac,.aac,.ogg,.m4a" ref="ylUpload" drag
                        @success="(row, res)=>{this.success(row, res,item)}" @preview="preview"
                        @remove="(row)=>{this.remove(row,item)}" :limit="99"
                        :file="item.fileList.filter(i=>i.Attachment_Type == key)"></yl-upload>
                    </el-tab-pane>
                  </el-tabs>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
          <div class="table_titel">
            <div class="titel">景区攻略</div>
            <div class="operation">
              <el-button type="primary" size="small" @click="handleAdd('childDataForm1')">新增</el-button>
              <el-button type="danger" size="small" @click="handleRemove('childDataForm1')">删除</el-button>
            </div>
          </div>
          <el-form :model="{childDataForm1:childDataForm1.filter(item => item.Row_Status != '1')}" ref="form1"
            :inline-message="true" style="width: 100%">
            <el-descriptions style="margin: 0 0 10px;"
              v-for="(item,index) in childDataForm1.filter(item => item.Row_Status != '1')" :key="index"
              :data-options="JSON.stringify({ 'TableName': 'scenic_spot_strategy', 'form': 'childDataForm1', 'ParentTableName': 'scenic_spot'})"
              :column="2" size="large" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">景区攻略名称</div>
                </template>
                <el-form-item :prop="'childDataForm1.' + index + '.Scenic_Spot_Strategy_Name'">
                  <el-input v-model="item.Scenic_Spot_Strategy_Name" class="borderless-input" placeholder="请输入景区攻略名称" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">攻略封面</div>
                </template>
                <el-form-item :prop="'childDataForm1.' + index + '.Picture_URL'">
                  <yl-upload ref="ylUpload" v-model="item.Picture_URL"></yl-upload>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">攻略详情</div>
                </template>
                <el-form-item :prop="'childDataForm1.' + index + '.Main'"
                :rules="[{ required: true, message: '请输入攻略详情', trigger: 'blur' }]">
                  <yl-text-editor  v-model="item.Main" placeholder="请输入攻略详情"></yl-text-editor>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
        </div>
      </div>
    </div>
    <yl-online-preview :file-url="fileUrl" v-model="showDialog"></yl-online-preview>
    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
    </footer>
  </div>
</body>
<script src="../../../utils/utils.js"></script>
<script src="../../../config/config.js"></script>
<script src="../../../utils/compressor.js"></script>
<script src="../../../utils/wangeditor.js"></script>
<script src="../../../utils/mixins.js"></script>
<script src="../../../yl/vue.js"></script>
<script src="../../../yl/index.js"></script>
<script src="../../../yl/zh-cn.mjs"></script>
<script src="../../../yl/index.iife.min.js"></script>
<script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
<script src="../../../yl/jquery.easyui.min.js"></script>
<script src="../../../yl/jquery.easyui.mobile.js"></script>
<script src="../../../yl/moment.min.js"></script>
<script src="../../../api/request.js"></script>
<script src="./js/add.js"></script>

</html>